﻿<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>13 多值运动-处理透明度</title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }
        
        div {
            width: 300px;
            height: 150px;
            background-color: royalblue;
            margin: 20px 0;
            border: 4px solid #000;
            opacity: 0.3;
            filter: alpha(opacity: 30);
        }
    </style>
</head>

<body>
    <div></div>
    <div></div>
    <div></div>
    <script type="text/javascript">
        window.onload = function() {
            var allBox = document.getElementsByTagName('div');

            allBox[0].onmouseover = function() {
                startAnimation(this, 'opacity', 100);
            }
            allBox[0].onpointerout = function() {
                startAnimation(this, 'opacity', 30)
            }
            allBox[1].onmouseover = function() {
                startAnimation(this, 'height', 300);
            }
            allBox[1].onpointerout = function() {
                startAnimation(this, 'height', 150);
            }
            allBox[2].onmouseover = function() {
                startAnimation(this, 'width', 600);
            }
            allBox[2].onpointerout = function() {
                startAnimation(this, 'width', 300)
            }
            var speed = 0;

            function startAnimation(obj, attr, endTarget) {
                // 针对于多物体运动，定时器的返回值要绑定当前的对象中
                clearInterval(obj.timer);
                obj.timer = setInterval(function() {
                    var cur = 0;
                    // 0. 获取样式属性
                    // 透明度变化处理
                    if (attr === 'opacity') {
                        cur = Math.round((getStyle(obj, attr)) * 100);
                    } else {
                        var cur = parseInt(getStyle(obj, attr));
                    }

                    // 1.求速度
                    speed = (endTarget - cur) / 20;
                    speed = endTarget > cur ? Math.ceil(speed) : Math.floor(speed);

                    // 2.临界处理
                    if (endTarget === cur) {
                        clearInterval(obj.timer);
                        return;
                    }

                    // 3.运动起来
                    if (attr === 'opacity') {
                        obj.style[attr] = `alpha(opacity:${cur + speed})`;
                        obj.style[attr] = (cur + speed) / 100;
                    } else {
                        obj.style[attr] = cur + speed + 'px';
                    }

                }, 30)
            }
            /**
             * 获取元素属性的函数
             * @param {Object} obj  当前元素对象
             * @param {Object} attr  当前元素对象的属性
             */

            function getStyle(obj, attr) {
                if (obj.currentStyle) {
                    // 兼容ie
                    return obj.currentStyle[attr];
                } else {
                    // 兼容主流浏览器
                    return getComputedStyle(obj, null)[attr];
                }
            }
        }
    </script>
</body>

</html>